<template>
	<mu-bottom-nav color="white" class="mu-bottom-nav" :value.sync="current" shift>
		<mu-bottom-nav-item
				v-for="(item, index) in menus" :key="index"
				:value="item.value"
				:title="item.title"
				:icon="item.icon"
				:to="item.to"
		/>
	</mu-bottom-nav>
</template>

<script>
export default {
	name: "MyBottomNav",
	data() {
		return {
			current: 'home'
		}
	},
	props: ['menus']
}
</script>

<style scoped>
	.mu-bottom-item {
		color: #AFAFAF;
	}
	.mu-bottom-nav{
		border-top: #AFAFAF;
		box-shadow: 0 -1px 10px #AFAFAF;
	}

	.mu-bottom-item-active.is-shift {
		color: #49A28C;
	}
</style>